<template>
  <div>
    <el-card class="box-card ">
      <div class="content">

        <el-row :gutter="8"
                type="flex"
                align="middle"
                style="margin-bottom:10px;flex-wrap:wrap;align-items: between;">
          <el-col :span="1.5">
            登录地址
          </el-col>
          <el-col :span="40">
            <el-input size="small"
                      v-model="queryParams.ipaddr"
                      placeholder="请输入参数名称"></el-input>
          </el-col>
          <el-col :span="1.5">
            用户名称
          </el-col>
          <el-col :span="40">
            <el-input size="small"
                      v-model="queryParams.userName"
                      style="width: 200px"
                      placeholder="请输入用户名称"></el-input>
          </el-col>

          <el-col :span="1.5">
            状态
          </el-col>
          <el-col :span="40">
            <el-select placeholder="请选择"
                       size="small"
                       v-model="queryParams.status">

              <el-option label="成功"
                         :value="0">
              </el-option>
              <el-option label="失败"
                         :value="1">
              </el-option>

            </el-select>

          </el-col>
          <el-col :span="1.5">
            创建时间
          </el-col>
          <el-col :span="30">
            <el-date-picker type="daterange"
                            size="small"
                            style="width:200px"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-search"
                       @click="getData()">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon='el-icon-refresh'
                       size="mini"
                       @click="refreshTable()">重置</el-button>
          </el-col>
        </el-row>
        <div class="btnList">
          <el-row :gutter="8"
                  type="flex"
                  align="middle"
                  class="btn_nav">

            <el-col :span="1.5">
              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         plain
                         :disabled='checkItem.length==0'
                         @click="delMore">删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         plain
                         @click="clean">清空</el-button>
            </el-col>

            <el-col :span="1.5">
              <el-button size="mini"
                         type="warning"
                         icon="el-icon-download"
                         @click="exportdata"
                         plain>导出</el-button>
            </el-col>

          </el-row>

          <el-row :gutter="8"
                  type="flex"
                  align="middle"
                  class="btn_nav">

            <el-col :span="1.5">
              <el-button size="mini"
                         icon="el-icon-search"
                         circle></el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="refreshTable"
                         size="mini"
                         icon="el-icon-refresh"
                         circle></el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="refreshTable"
                         size="mini"
                         icon="el-icon-menu"
                         circle></el-button>
            </el-col>
          </el-row>
        </div>
        <el-table :data="tableData"
                  v-loading="loading"
                  style="width: 100%"
                  :header-cell-style="{background:'#f8f8f9','text-align':'center'}"
                  @selection-change="handleSelectionChange"
                  :cell-style="{'text-align':'center'}">
          <el-table-column width="80"
                           type="selection">
          </el-table-column>
          <el-table-column prop="infoId"
                           width="80"
                           label="访问编号">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="userName"
                           width="80"
                           label="用户名称">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="ipaddr"
                           width="150"
                           label="登录地址">

          </el-table-column>

          <el-table-column :show-overflow-tooltip="true"
                           prop="loginLocation"
                           width="80"
                           label="登陆地点">

          </el-table-column>
          <el-table-column prop="browser"
                           width="80"
                           label="浏览器">

          </el-table-column>
          <el-table-column prop="os"
                           width="80"
                           label="操作系统">

          </el-table-column>
          <el-table-column prop="status"
                           width="80"
                           label="登录状态">
            <template slot-scope="scope">
              <span>{{scope.row.status==0?'成功':'失败'}}</span>
            </template>

          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="msg"
                           label="操作信息">
          </el-table-column>

          <el-table-column prop="loginTime"
                           label="登录日期">
          </el-table-column>

        </el-table>
        <div class="page"
             v-show="total!=0">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="queryParams.pageNum"
                         :page-sizes="[3, 5, 9, 10]"
                         :page-size="queryParams.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 权限

      queryParams: {
        pageNum: 1,
        pageSize: 5,
        ipaddr: null,
        userName: null,
        status: null
      },
      tableData: [],
      checkItem: [],
      seltime: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      flag: true,
      treeList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      let { data } = await this.$axios.get('monitor/logininfor/list', { params: this.queryParams })
      this.tableData = data.rows
      this.total = data.total
      this.loading = false
    },

    delMore() {
      let ids = this.checkItem.map((el) => el.infoId)
      this.deleteHandler(ids)
    },
    deleteHandler(id) {
      this.$confirm(`是否确认删除编号为${id.toString()}的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`monitor/logininfor/${id.toString()}`)
          console.log(data)
          if (data.data.code != 200) return this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    clean() {
      this.$confirm(`是否确认清空所有登录日志数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`monitor/logininfor/clean`)
          console.log(data)
          if (data.data.code != 200) return this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 刷新
    // 刷新
    refreshTable() {
      this.loading = true
      this.getData()
      this.queryParams = { pageNum: 1, pageSize: 5, ipaddr: null, userName: null, status: null }
    },

    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getData()
    },
    handleSelectionChange(val) {
      this.checkItem = val
    },
    async exportdata() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // let data = await this.$axios.get('system/user/export', { params: this.queryParams })
          // console.log(data)
          this.getExport()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async getExport() {
      let { data } = await this.$axios.get('monitor/logininfor/export', { params: this.queryParams })

      if (data.code != 200) {
        this.$message.error('失败')
      } else {
        window.location.href = 'https://jumeng.xzjumeng.com/prod-api/common/download?fileName=' + encodeURI(data.msg) + '&delete=' + true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btnList {
  margin-bottom: 8px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>